<template>
	<view class="user-info-cmp">

		<view class="user-view">
			<view class="user-info">
				<image src="/static/about-5.png" mode="aspectFill" class="user-head-portrait"></image>
				<view class="user-content">
					<view class="user-name">张玉</view>
					<view class="user-vip">
						<image src="/static/pc/f-vip@2x.png" class="vip-icon"></image>
						<view>白金会员</view>
					</view>
				</view>
			</view>
			<view class="user-centre">
				<view>进入个人中心</view>
				<i class="el-icon-arrow-right"></i>
			</view>
		</view>
		<view class="cell-view">

		</view>
		<view class="cell-view">
			<view class="cell-content">
				<view class="cell-item">
					<view class="label-view">认购总额（万元）</view>
					<view class="text-view">1325</view>
				</view>
				<view class="cell-item">
					<view class="label-view">购买总额（万元）</view>
					<view class="text-view">1325</view>
				</view>
			</view>
			<view class="cell-content">
				<view class="cell-item">
					<view class="label-view">预约总额（万元）</view>
					<view class="text-view">1325</view>
				</view>
				<view class="cell-item">
					<view class="label-view">预期收益（万元）</view>
					<view class="text-view">1325</view>
				</view>
			</view>
			<view class="cell-content">
				<view class="cell-item">
					<view class="label-view">购买预期收益（万元）</view>
					<view class="text-view">1325</view>
				</view>
				<view class="cell-item">
					<view class="label-view">预约预期收益（万元）</view>
					<view class="text-view">1325</view>
				</view>
			</view>
		</view>
		<view class="button-view">退出</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style scoped lang="scss">
	.user-info-cmp {
		width: 436px;
		padding: 24px 0;

		.user-view {
			width: 100%;
			padding: 0 24px;
			@extend .row-between;

			.user-info {
				@extend .row;

				.user-head-portrait {
					width: 64px;
					height: 64px;
					border-radius: 50%;
				}

				.user-content {
					margin-left: 13px;

					.user-name {
						font-size: 22px;
						color: #FFFFFF;
					}

					.user-vip {
						@extend .row;
						font-size: 12px;
						color: #FF911B;

						.vip-icon {
							width: 14px;
							height: 14px;
							margin-right: 4px
						}
					}
				}
			}

			.user-centre {
				@extend .row;
				font-size: 14px;
				color: #FFFFFF;
			}
		}

		.cell-view {
			width: 100%;
			@extend .row-between;
			flex-wrap: wrap;
			padding: 0 13px;
			margin-top: 8px;

			.cell-content {
				.cell-item {
					width: 100%;
					color: #FFFFFF;
					padding: 0 12px;
					.label-view {
						font-size: 12px;
					}

					.text-view {
						font-size: 20px;
					}
				}

				.cell-item+.cell-item {
					margin-top: 11px;
				}
			}

			.cell-content+.cell-content {
				border-left: 1px solid #666666;
			}
		}
	
		.button-view{
			width: 68px;
			height: 35px;
			border-radius: 4px;
			border: 1px solid #FFFFFF;
			font-size: 14px;
			color: #FFFFFF;
			@extend .column;
			margin-left: 25px;
			margin-top: 13px;
		}
	}
</style>